<template>
    <div class="userBox">
        <div class="usersTitle">
            <div class="titleText">编辑接口</div>
            <!-- <div class="titlesBrn">
                <el-button class="titlesBrn" type="primary" size="mini" @click="toAddUsers">新增项目</el-button>
            </div> -->
        </div>
        <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="接口名称">
                <el-input v-model="formData.name" class="formInput" placeholder="请输入接口名称"></el-input>
            </el-form-item>
            <el-form-item label="接口描述">
                <el-input v-model="formData.description" class="formInput" placeholder="请输入接口描述"></el-input>
            </el-form-item>
            <el-form-item label="所属项目">
                <!-- <el-input v-model="formData.projectId" class="formInput"></el-input> -->
                <el-select v-model="formData.projectId" placeholder="请选择所属项目" disabled class="formInput">
                    <el-option v-for="item in project.items" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请求地址">
                <el-input v-model="formData.requestUrl" class="formInput" placeholder="请输入请求地址"></el-input>
            </el-form-item>
            <el-form-item label="请求方式">
                <el-select v-model="formData.requestMethod" placeholder="请选择请求方式" class="formInput">
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请求参数">
                <!-- <el-input v-model="formData.requestParameters" class="formInput"></el-input> -->
                <el-button type="primary" v-if="formData.requestParameters.length == 0" icon="el-icon-plus" class="" title="添加" @click="addRequestArguments"></el-button>
                <div v-else>
                    <div class="arguments">
                        <span>参数名</span>
                        <span>必选</span>
                        <span>类型</span>
                        <span>说明</span>
                    </div>
                    <div class="arguments" v-for="(item, index) in formData.requestParameters" :key="index" :style="{ marginBottom: formData.requestParameters.length > 1 ? '15px' : '0px' }">
                        <el-input v-model="item.parametersName" class="argumentsInput" placeholder="请输入参数名"></el-input>
                        <el-select v-model="item.isMust" placeholder="请选择" class="argumentsInput">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                        <el-select v-model="item.parameterType" placeholder="请选择数据类型" class="argumentsInput">
                            <el-option label="String" value="String"></el-option>
                            <el-option label="Number" value="Number"></el-option>
                            <el-option label="Boolean" value="Boolean"></el-option>
                            <el-option label="Array" value="Array"></el-option>
                            <el-option label="Object" value="Object"></el-option>
                        </el-select>
                        <el-input v-model="item.explain" class="argumentsInput" style="margin-right: 0" placeholder="请输入参数说明"></el-input>
                        <div class="argumentsBtn" :style="{ right: index == formData.requestParameters.length - 1 ? '-137px' : '-70px' }">
                            <el-button type="danger" icon="el-icon-delete" class="" title="删除" @click="deleteRequestArguments(index)"></el-button>
                            <el-button type="primary" v-if="index == formData.requestParameters.length - 1" icon="el-icon-plus" class="" title="添加" @click="addRequestArguments"></el-button>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="返回内容">
                <!-- <el-input v-model="formData.responseContent" class="formInput"></el-input> -->
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="formData.responseContent" resize="none" class="formInput"></el-input>
            </el-form-item>
            <el-form-item label="返回参数">
                <!-- <el-input v-model="formData.responseParameters" class="formInput"></el-input> -->
                <el-button type="primary" v-if="formData.responseParameters.length == 0" icon="el-icon-plus" class="" title="添加" @click="addResponseArguments"></el-button>
                <div v-else>
                    <div class="arguments">
                        <span>参数名</span>
                        <span>必选</span>
                        <span>类型</span>
                        <span>说明</span>
                    </div>
                    <div class="arguments" v-for="(item, index) in formData.responseParameters" :key="index" :style="{ marginBottom: formData.responseParameters.length > 1 ? '15px' : '0px' }">
                        <el-input v-model="item.parametersName" class="argumentsInput" placeholder="请输入参数名"></el-input>
                        <el-select v-model="item.isMust" placeholder="请选择" class="argumentsInput">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                        <el-select v-model="item.parameterType" placeholder="请选择数据类型" class="argumentsInput">
                            <el-option label="String" value="String"></el-option>
                            <el-option label="Number" value="Number"></el-option>
                            <el-option label="Boolean" value="Boolean"></el-option>
                            <el-option label="Array" value="Array"></el-option>
                            <el-option label="Object" value="Object"></el-option>
                        </el-select>
                        <el-input v-model="item.explain" class="argumentsInput" style="margin-right: 0" placeholder="请输入参数说明"></el-input>
                        <div class="argumentsBtn" :style="{ right: index == formData.responseParameters.length - 1 ? '-137px' : '-70px' }">
                            <el-button type="danger" icon="el-icon-delete" class="" title="删除" @click="deleteResponseArguments(index)"></el-button>
                            <el-button type="primary" v-if="index == formData.responseParameters.length - 1" icon="el-icon-plus" class="" title="添加" @click="addResponseArguments"></el-button>
                        </div>
                        <!-- <div class="argumentsBtn">
                            <el-button type="primary" v-if="index == formData.responseParameters.length - 1" icon="el-icon-plus" class="" title="添加" @click="addResponseArguments"></el-button>
                            <el-button type="danger" v-else icon="el-icon-delete" class="" title="删除" @click="deleteResponseArguments(index)"></el-button>
                        </div> -->
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="formData.remarks" resize="none" class="formInput"></el-input>
            </el-form-item>
            <el-form-item label="创建人">
                <el-select v-model="formData.userCreateId" placeholder="请选择创建人" disabled class="formInput">
                    <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">{{ $route.query.docId ? '修改' : '立即创建' }}</el-button>
                <el-button @click="$router.back(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            pageData: [],
            formData: {
                name: '', // 接口名字
                description: '', // 接口描述
                projectId: '', // 项目id
                requestUrl: '', // 请求url
                requestMethod: 'GET', // 请求方式
                requestParameters: [], // 请求参数
                responseContent: '', // 返回内容
                responseParameters: [], // 返回参数
                remarks: '', // 备注
                userCreateId: '' // 创建人id
            },
            userList: '',
            project: ''
        }
    },
    mounted() {
        // console.log((this as any).$route)
        ;(this as any).getUserList()
        ;(this as any).getObjectList()
        if ((this as any).$route.query.docId) {
            // console.log((this as any).$route.query.apiId)
            ;(this as any).getPageData((this as any).$route.query.docId)
        }
        // console.log((this as any).$store.state.user.userInfo.id)
    },
    methods: {
        onSubmit() {
            // console.log((this as any).formData)
            let postData = (this as any).formData
            let _that = this as any
            if (!postData.name) {
                _that.$alert('请输入接口名称')
                return
            }
            if (!postData.requestUrl) {
                _that.$alert('请输入接口地址')
                return
            }
            if (postData.requestParameters.length < 1) {
                _that.$alert('请添加请求参数')
                return
            }
            if (!postData.responseContent) {
                _that.$alert('请输入返回内容')
                return
            }
            if (postData.responseParameters.length < 1) {
                _that.$alert('请添加返回参数')
                return
            }
            if (_that.$route.query.docId) {
                // 修改
                postData.id = _that.$route.query.apiId
                postData.userModifiedId = _that.$store.state.user.userInfo.id
                _that.$request.postJson('/api/oa/doc/updateInterfaceDoc', postData).then((res: any) => {
                    if (res.code == 200) {
                        _that.$message.success('修改成功')
                        _that.$router.back(-1)
                        // console.log(res)
                    }
                })
            } else {
                // 新增
                _that.$request.postJson('/api/oa/doc/addInterfaceDoc', _that.formData).then((res: any) => {
                    if (res.code == 200) {
                        _that.$message.success('新增成功')
                        _that.$router.back(-1)
                        // console.log(res)
                    }
                })
            }
        },
        // 添加请求参数
        addRequestArguments() {
            let datas = {
                parametersName: '',
                isMust: '1',
                parameterType: '',
                explain: ''
            }
            ;(this as any).formData.requestParameters.push(datas)
        },
        // 删除请求参数
        deleteRequestArguments(index: number) {
            ;(this as any).formData.requestParameters.splice(index, 1)
        },
        // 添加返回参数
        addResponseArguments() {
            let datas = {
                parametersName: '',
                isMust: '1',
                parameterType: '',
                explain: ''
            }
            ;(this as any).formData.responseParameters.push(datas)
        },
        // 删除返回参数
        deleteResponseArguments(index: number) {
            ;(this as any).formData.responseParameters.splice(index, 1)
        },
        getObjectList() {
            let userId = ''
            let loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
            if (loginMsg.permission != '1') {
                userId = loginMsg.id
            }
            ;(this as any).$request.get('/api/oa/users/findProject', { userId, pageNum: (this as any).pageNum, pageSize: 1000 }).then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).project = res.data
                    ;(this as any).formData.projectId = (this as any).$route.query.projectId
                }
            })
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                    ;(this as any).formData.userCreateId = (this as any).$store.state.user.userInfo.id
                    // console.log((this as any).userList)
                    // this.userValue = (this as any).userList[0].id
                }
            })
        },
        // 获取api文档内容
        getPageData(id: string) {
            let _that = this as any
            _that.$request
                .get('/api/oa/doc/getInterfaceDocByDocId', {
                    docId: id
                })
                .then((res: any): void => {
                    if (res.code == 200) {
                        let data = res.data
                        _that.formData.name = data.name
                        _that.formData.description = data.description
                        _that.formData.projectId = data.projectId
                        _that.formData.requestUrl = data.requestUrl
                        _that.formData.requestMethod = data.requestMethod
                        _that.formData.requestParameters = data.requestParameters
                        _that.formData.responseContent = data.responseContent
                        _that.formData.responseParameters = data.responseParameters
                        _that.formData.remarks = data.remarks
                        _that.formData.userCreateId = data.userCreateId
                    }
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.userBox {
    background: #ffffff;
    padding: 20px;
    .usersTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .titleText {
            font-weight: 600;
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .userHeadImg {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
    }
    .formInput {
        width: 700px;
    }
    .arguments {
        display: flex;
        justify-content: center;
        width: 700px;
        position: relative;
        align-items: center;
        span {
            text-align: center;
            width: 25%;
            margin: 0 5px;
            color: #333333;
            font-weight: 600;
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
        }
        .argumentsInput {
            margin: 0 5px;
            width: 25%;
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
        }
        .argumentsBtn {
            position: absolute;
            top: 0;
            right: -70px;
        }
    }
}
</style>
<style>
.userBox .elTableStyle {
    color: #333333;
}
.userBox .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.userBox table tr td .cell {
    text-align: center !important;
}
</style>
